<template>
	<footer class="footer">
		<span class="todo-count">剩余<strong>{{ leftCount }}</strong></span>
		<ul class="filters">
			<li>
				<a :class="{selected: type === 'all'}" href="javascript:;" @click.prevent="changeType('all')">全部</a>
			</li>
			<li>
				<a :class="{selected: type === 'active'}"  href="javascript:;" @click.prevent="changeType('active')">未完成</a>
			</li>
			<li>
				<a :class="{selected: type === 'completed'}"  href="javascript:;" @click.prevent="changeType('completed')">已完成</a>
			</li>
		</ul>
		<button class="clear-completed" v-show="isShowClear" @click="clear">清除已完成</button>
	</footer>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
	export default {
		data(){
			return{
				
			}
		},
		computed: {
			 	...mapState(['list','type']),
				...mapGetters(['leftCount','isShowClear'])	
		},
		methods:{
			clear(){
				this.$store.dispatch('clear')
			},
			changeType(type){
				this.$store.commit('changeType',type)
			}
		}
	}
</script>
